<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js和jq的区别</title>
</head>
<body>
	<p class="p1" id="p1">段落</p>
	
	<a href="" id="js">js</a>
	<a href="" id="jq">jq</a>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		 
		// 1. 获取元素上不同
		
		// dom 元素 ： document.getElementById()
		// jq对象：$(dom元素) $('#id') $('.class') $('tag') 
		
		// dom 转 jq
		var p1Dom = document.getElementById('p1')
		console.log(p1Dom)
		console.log('jq', $(p1Dom))

		// jq 转 dom
		var p1Jq = $('p')
		console.log('dom:' , p1Jq[0])

		console.log(p1Dom === p1Jq[0])

		// 2. 报错机制不同
		// innerHTML 是js里面dom对象的属性
		// html() 是 jquery里面jq对象的方法
		console.log(p1Dom.innerHTML)
		console.log(p1Jq.innerHTML) // 不报错
		// alert(1) // 照样执行

		// console.log(p1Jq.html())
		// console.log(p1Dom.html()) // 报错
		// alert(2) // js 上面报错下面不执行

		// 3. js 事件 和 jq事件上的不同
		
		// js on+方法名 == jq 方法名()
		// e.g. onclick == click()
		// 写法上 
		// dom元素.onclick = function() { ...}
		// jq对象.click( function() {} )
		
		// js 
		var js = document.getElementById('js')
		js.onclick = function() {
			alert('this is js')
		}
		// jq
		var jq = $('#jq')
		jq.click(function(){
			alert('this is jq')
		})

	</script>
</body>
</html>